<style lang='scss' scoped>
@import "./view2.scss";
</style>

<template>
    <view class='view1'>
        <!-- 轮播图 -S -->
        <u-swiper :list="state.bananerArr" @click="goPath" border-radius="16"></u-swiper>
        <!-- 轮播图 -E -->
        <!-- 导航栏 -S -->
        <view class="nav">
            <view class="nav_left">
                <image src="../../static/images/index/recruit.png" mode="widthFix" />
                <view class="nav_left_text">
                    <view class="nav_left_text_t">邀请实力团队长</view>
                    <view class="nav_left_text_b">得最高33%返佣</view>
                </view>
            </view>
            <view class="nav_right">
                <image src="../../static/images/index/income.png" mode="widthFix" />
                <view class="nav_left_text">
                    <view class="nav_left_text_t">邀请会员</view>
                    <view class="nav_left_text_b">无上限分佣奖励</view>
                </view>
            </view>
        </view>
        <!-- 导航栏 -E -->
        <!-- 爆款精品 -S -->
        <view class="duanju_title">
            <view class="text">爆款精品</view>
            <image src="../../static/images/index/boutique.png" mode="widthFix" />
        </view>
        <scroll-view scroll-x @touchmove.stop>
            <view class="listsForHot">
                <view class="row_list" v-for="(item, index) in state.listsForHot" :key="index">
                    <image class="row_list_top_image" :src="item.image_cover" />
                    <view class="row_list_content">
                        <view class="row_list_content_name">{{ item.name || "" }}</view>
                        <!-- <view class="row_list_content_image">
                            <image v-if="item.is_share_douyin" src="../../static/images/index/douyinIcon.png" mode="widthFix" />
                            <image v-if="item.is_share_kuaishou" src="../../static/images/index/kuaishouIcon.png" mode="widthFix" />
                            <image v-if="item.is_share_h5" src="../../static/images/index/siyuIcon.png" mode="widthFix" />
                            <image v-if="item.is_share_wechat" src="../../static/images/index/weixinIcon.png" mode="widthFix" />
                        </view> -->
                        <view class="row_list_content_num">
                            {{ item.share_num || "" }}人推广
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 爆款精品 -E -->
        <!-- 最新上架 -S -->
        <view class="duanju_title" @touchmove.stop>
            <view class="text">最新上架</view>
            <image src="../../static/images/index/nuew.png" mode="widthFix" />
        </view>
        <scroll-view scroll-x @touchmove.stop>
            <view class="listsForNew">
                <view class="row_list" v-for="(item, index) in state.listsForNew" :key="index">
                    <image class="row_list_top_image" :src="item.image_cover" />
                    <view class="row_list_content">
                        <view class="row_list_content_name">{{ item.name || "" }}</view>
                        <view class="row_list_content_image">
                            <image v-if="item.is_share_douyin" src="../../static/images/index/douyinIcon.png" mode="widthFix" />
                            <image v-if="item.is_share_kuaishou" src="../../static/images/index/kuaishouIcon.png" mode="widthFix" />
                            <image v-if="item.is_share_h5" src="../../static/images/index/siyuIcon.png" mode="widthFix" />
                            <image v-if="item.is_share_wechat" src="../../static/images/index/weixinIcon.png" mode="widthFix" />
                        </view>
                        <view class="row_list_content_num">
                            {{ item.share_num || "" }}人推广
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 最新上架 -E -->
        <!-- 新手必推 -S -->
        <view class="duanju_title" @touchmove.stop>
            <view class="text">新手必推</view>
            <image src="../../static/images/index/novice.png" mode="widthFix" />
        </view>
        <scroll-view scroll-x @touchmove.stop>
            <view class="listsForRecommend">
                <view class="row_list" v-for="(item, index) in state.listsForRecommend" :key="index">
                    <image class="row_list_top_image" :src="item.image_cover" />
                    <view class="row_list_content">
                        <view class="row_list_content_name">{{ item.name || "" }}</view>
                        <view class="row_list_content_image">
                            <image v-if="item.is_share_douyin" src="../../static/images/index/douyinIcon.png" mode="widthFix" />
                            <image v-if="item.is_share_kuaishou" src="../../static/images/index/kuaishouIcon.png" mode="widthFix" />
                            <image v-if="item.is_share_h5" src="../../static/images/index/siyuIcon.png" mode="widthFix" />
                            <image v-if="item.is_share_wechat" src="../../static/images/index/weixinIcon.png" mode="widthFix" />
                        </view>
                        <view class="row_list_content_num">
                            {{ item.share_num || "" }}人推广
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 新手必推 -E -->
        <!-- 搜索栏 -S -->
        <view class="sticky_box">
            <!-- <u-navbar-s></u-navbar-s> -->
            <seachall2 @search="search" :placeholder="'请输入剧名搜索'"></seachall2>
            <seachfilter2 @seachfiltertabs="seachfiltertabs"></seachfilter2>
        </view>
        <!-- 搜索栏 -E -->
        <!-- 底部列表 -S -->
        <view class="footer_list">
            <view class="list" v-for="(item, index) in searchSketchArr" :key="index">
                <view class="left">
                    <image :src="item.image_cover" />
                </view>
                <view class="center">
                    <view class="a">
                        <view class="name">
                            {{ item.name || "" }}
                        </view>
                        <view class="jishu"> {{ item.assemble || "" }}集 </view>
                    </view>
                    <view class="b">
                        <image v-if="item.is_share_douyin" src="../../static/images/index/douyinIcon.png" mode="widthFix" />
                        <image v-if="item.is_share_kuaishou" src="../../static/images/index/kuaishouIcon.png" mode="widthFix" />
                        <image v-if="item.is_share_h5" src="../../static/images/index/siyuIcon.png" mode="widthFix" />
                        <image v-if="item.is_share_wechat" src="../../static/images/index/weixinIcon.png" mode="widthFix" />
                        <text>{{ item.share_num || "" }}人推广</text>
                    </view>
                    <view class="c"> {{ item.theaterUpstreamApp.title || "" }} </view>
                    <view class="d">
                        <text>历史收益最高： {{ item.max_pay_num }}元 </text>
                    </view>
                </view>
                <view class="right">
                    <u-button class="right_button" hover-class="none">推广</u-button>
                </view>
            </view>
            <view class="footer——text" v-if="searchSketchArr">
                {{ searchSketchArr.length < 30 ? "没有更多了" : "正在加载中..." }}
            </view>
        </view>
        <!-- 底部列表 -E -->
    </view>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { searchSketch } from "@/api/index";
import seachall2 from "@/components/seachall/seachall.vue";
import seachfilter2 from "@/components/seachfilter/seachfilter.vue";
components: {
    seachall2;
    seachfilter2;
}
const props = defineProps({
    searchSketchArr: {
        type: Array,
        default: [],
    },
});
const state = reactive<{
    bananerArr: Array;
    listsForHot: Array;
    listsForNew: Array;
    listsForRecommend: Array;
}>({
    listsForRecommend: [],
    listsForNew: [],
    listsForHot: [],
    bananerArr: [],
});

// 本地数据
const localData = () => {
    const bannerlist = uni.getStorageSync("bannerlist") || [];
    state.bananerArr = bannerlist || [];
    const listsAllData = uni.getStorageSync("listsAllData") || [];
    state.listsForHot = listsAllData.listsForHot || [];
    state.listsForNew = listsAllData.listsForNew || [];
    state.listsForRecommend = listsAllData.listsForRecommend || [];
};
const goPath = () => {};
// 点击搜索
const search = (seachVal) => {
    console.log("seachVal:", seachVal);
};
// 点击筛选
const seachfiltertabs = (index) => {
    console.log("index:", index);
};
// 暴露方法
defineExpose({ localData });
</script>